<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>批量信息创建系统</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="tech-bg"></div>
    <div class="container">
        <aside class="sidebar">
            <h2>功能菜单</h2>
            <nav>
                <button id="dashboardBtn">数据统计</button>
                <button id="createTemplateBtn">创建模板</button>
                <button id="manageTemplatesBtn">管理模板</button>
                <button id="enterDataBtn">信息录入</button>
                <button id="viewDataBtn">查看数据</button>
                <button id="batchDownloadBtn">批量下载</button>
            </nav>
        </aside>

        <main class="main-content">
            <header>
                <h1>批量信息创建系统</h1>
            </header>

            <!-- Dashboard Section -->
            <section id="dashboard" class="section">
                <h2>数据统计</h2>
                <div class="dashboard-grid">
                    <div class="dashboard-card">
                        <div class="card-title">模板数量</div>
                        <div id="templateCount" class="card-value">0</div>
                    </div>
                    <div class="dashboard-card">
                        <div class="card-title">数据总量</div>
                        <div id="totalDataCount" class="card-value">0</div>
                    </div>
                    <div class="dashboard-card">
                        <div class="card-title">今日新增</div>
                        <div id="todayDataCount" class="card-value">0</div>
                    </div>
                    <div class="dashboard-card">
                        <div class="card-title">字段类型分布</div>
                        <div id="fieldTypeChart" class="chart-container"></div>
                    </div>
                    <div class="dashboard-card">
                        <div class="card-title">数据录入趋势</div>
                        <div id="dataTrendChart" class="chart-container"></div>
                    </div>
                    <div class="dashboard-card">
                        <div class="card-title">模板使用情况</div>
                        <div id="templateUsageChart" class="chart-container"></div>
                    </div>
                </div>
            </section>

            <!-- Template Creation Section -->
            <section id="templateCreation" class="section hidden">
                <h2>创建新模板</h2>
                <form id="templateForm">
                    <div class="form-group">
                        <label for="templateName">模板名称：</label>
                        <input type="text" id="templateName" required>
                    </div>
                    <div id="fieldsContainer">
                        <!-- Dynamic fields will be added here -->
                    </div>
                    <button type="button" id="addFieldBtn">添加字段</button>
                    <button type="submit">保存模板</button>
                </form>
            </section>

            <!-- Template Management Section -->
            <section id="templateManagement" class="section hidden">
                <h2>管理模板</h2>
                <div id="templatesList">
                    <!-- Templates will be listed here -->
                </div>
            </section>

            <!-- Data Entry Section -->
            <section id="dataEntry" class="section hidden">
                <h2>信息录入</h2>
                <div class="form-group">
                    <label for="templateSelect">选择模板：</label>
                    <select id="templateSelect"></select>
                </div>
                <div id="dataEntryForm">
                    <!-- Dynamic form based on selected template -->
                </div>
                <button id="saveDataBtn">保存数据</button>
            </section>

            <!-- Data View Section -->
            <section id="dataView" class="section hidden">
                <h2>查看数据</h2>
                <div class="form-group">
                    <label for="viewTemplateSelect">选择模板：</label>
                    <select id="viewTemplateSelect"></select>
                </div>
                <div id="dataViewContainer">
                    <!-- Data will be displayed here -->
                </div>
                <div class="pagination">
                    <button id="prevPageBtn">上一页</button>
                    <span id="pageInfo">第 1 页</span>
                    <button id="nextPageBtn">下一页</button>
                </div>
            </section>

            <!-- Batch Download Section -->
            <section id="batchDownload" class="section hidden">
                <h2>批量下载</h2>
                <div class="form-group">
                    <label for="downloadTemplateSelect">选择模板：</label>
                    <select id="downloadTemplateSelect"></select>
                </div>
                <div class="form-group">
                    <label for="downloadFormat">下载格式：</label>
                    <select id="downloadFormat" class="form-control">
                        <option value="csv">CSV 格式</option>
                        <option value="json">JSON 格式</option>
                        <option value="excel">Excel 格式</option>
                        <option value="word">Word 格式</option>
                    </select>
                </div>
                <button id="downloadBtn">下载</button>
            </section>
        </main>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="db.js"></script>
    <script src="app.js"></script>
</body>
</html> 